<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 375px;
            height: 44px;
            border: 1px solid red;
            display: flex;
            justify-content: center;


        }

        .box div {
            width: 40px;
            height: 44px;
            /* border: 1px solid red; */
            text-align: center;
            line-height: 44px;
            margin-right: 10px;
            color: #666;
            font-size: 15px;
        }

        .box .ac {
            color: #000;
            font-size: 17px;
            font-weight: bold;
            position: relative;
        }

        .box div:nth-child(4) {
            width: 70px;
            height: 44px;
        }

        .box .ac::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 12px;
            width: 16px;
            height: 2px;
            background: orangered;
        }

        .box .ac1 {
            color: #000;
            font-size: 17px;
            font-weight: bold;
            position: relative;
        }

        .box .ac1::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 27px;
            width: 16px;
            height: 2px;
            background: orangered;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="ac">热映</div>
        <div>影院</div>
        <div>待映</div>
        <div>经典电影</div>
    </div>
    <script>
        var oBox = document.getElementById('box');
        var oDiv = oBox.getElementsByTagName('div')
        for (var i = 0; i < oDiv.length; i++) {
            oDiv[i].index = i;
            oDiv[i].onclick = function () {
                for (var j = 0; j < oDiv.length; j++) {
                    oDiv[j].className = "";
                }
                if (this.index == 3) {
                    console.log(72, this);
                    this.className = "ac1";
                } else {
                    this.className = "ac";
                }
            }
        }
        // var oB1 = document.getElementById('b1');
        // var oB2 = document.getElementById('b2');
        // var oB3 = document.getElementById('b3');
        // var oB4 = document.getElementById('b4');
        // var oB5 = document.getElementById('b5');
        // oB2.onclick = function () {
        //     oB1.style.left = "82px";
        //     oB2.style.color = "#000";
        //     oB2.style.fontSize = "17px";
        //     oB2.style.fontWeight = "bold";
        //     oB3.style.color = "#666";
        //     oB3.style.fontSize = "15px";
        //     oB4.style.color = "#666";
        //     oB4.style.fontSize = "15px";
        //     oB5.style.color = "#666";
        //     oB5.style.fontSize = "15px";
        // }
        // oB3.onclick = function () {
        //     oB1.style.left = "132px";
        //     oB2.style.color = "#666";
        //     oB2.style.fontSize = "15px";
        //     oB3.style.color = "#000";
        //     oB3.style.fontSize = "17px";
        //     oB3.style.fontWeight = "bold";
        //     oB4.style.color = "#666";
        //     oB4.style.fontSize = "15px";
        //     oB5.style.color = "#666";
        //     oB5.style.fontSize = "15px";
        // }
        // oB4.onclick = function () {
        //     oB1.style.left = "183px";
        //     oB2.style.color = "#666";
        //     oB2.style.fontSize = "15px";
        //     oB3.style.color = "#666";
        //     oB3.style.fontSize = "15px";
        //     oB4.style.color = "#000";
        //     oB4.style.fontSize = "17px";
        //     oB4.style.fontWeight = "bold";
        //     oB5.style.color = "#666";
        //     oB5.style.fontSize = "15px";
        // }
        // oB5.onclick = function () {
        //     oB1.style.left = "248px";
        //     oB2.style.color = "#666";
        //     oB2.style.fontSize = "15px";
        //     oB3.style.color = "#666";
        //     oB3.style.fontSize = "15px";
        //     oB4.style.color = "#666";
        //     oB4.style.fontSize = "15px";
        //     oB5.style.color = "#000";
        //     oB5.style.fontSize = "17px";
        //     oB5.style.fontWeight = "bold";
        // }
    </script>
</body>

</html>